<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">考勤详情</text></block>
		</cu-custom>

		<view v-if="attendanceDetail!=null" class="sign-title bg-white margin-top">
			<view class="sign-title-l">
				<image class="portrait" mode="aspectFill" :src="attendanceDetail.facewhitelist.personphoto" />
				<view class="text">
					<view class="name">{{attendanceDetail.facewhitelist.personname}}</view>
					<view @click="goRule" class="gz">
						<text class="t1">考勤组:{{attendanceDetail.facewhitelist.attshits.sname}}</text>
						<text>查看规则</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-top">
			<uni-steps class="padding-top" :options="list2" active-color="#007AFF" :active="active" direction="column" />
		</view>

	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue';
	var utils = require('@/common/utils.js');
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				attendanceDetail: null,
				active: -1,
				list2: []
			}
		},
		onLoad(options) {
			console.log(options)
			if (typeof(options.time) != 'undefined') {
				console.log(options.time)
				let time = options.time
				time = '2019-12-18'
				this.getData(time)
			}
		},
		methods: {
			// 产看规则
			goRule() {
				uni.navigateTo({
					url: `rule`
				})
			},
			getData(time) {
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_ATTENDANCE_RECORD,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						perid: getApp().globalData.userid,
						page: 1,
						rows: 1,
						attdate_begin: time,
						attdate_end: time
					},
					success: (res) => {
						if (res.data.code == 0) {
							let data = res.data.data.results.shift()
							this.attendanceDetail = data
							console.log(this.attendanceDetail)
							let timeintervalcount = data.shifsset.timeintervalcount
							//获取打卡时间
							let timeinterval1 = data.timeinterval1
							// this.active = timeinterval1
							for (let i = 1; i <= timeintervalcount; i++) {
								if (i == 1) {
									this.list2.push({
										title: `${data.stime == null ? '未打卡' :'打卡时间 '+ utils.getFormatTime(data.stime.time)}`,
										desc: '上班时间 ' + data.shifsset.stime,
									})
									this.list2.push({
										title: `${data.etime == null ? '未打卡' :'打卡时间 '+ utils.getFormatTime(data.etime.time)}`,
										desc: '下班时间 ' + data.shifsset.etime
									})
									if (data.stime != null) {
										this.active = 0
									}
									if (data.etime != null) {
										this.active = 1
									}
								}

								if (i == 2) {
									this.list2.push({
										title: `${data.stime2 == null ? '未打卡' :'打卡时间 '+ utils.getFormatTime(data.stime2.time)}`,
										desc: '上班时间 ' + data.shifsset.stime2
									})
									this.list2.push({
										title: `${data.etime2 == null ? '未打卡' :'打卡时间 '+ utils.getFormatTime(data.etime2.time)}`,
										desc: '下班时间 ' + data.shifsset.etime2
									})
									if (data.stime2 != null) {
										this.active = 2
									}
									if (data.etime2 != null) {
										this.active = 3
									}
								}

								if (i == 3) {
									this.list2.push({
										title: `${data.stime3 == null ? '未打卡' :'打卡时间 '+ utils.getFormatTime(data.stime3.time)}`,
										desc: '上班时间 ' + data.shifsset.stime3
									})
									this.list2.push({
										title: `${data.etime3 == null ? '未打卡' :'打卡时间 '+ utils.getFormatTime(data.etime3.time)}`,
										desc: '下班时间 ' + data.shifsset.etime3,
									})
									if (data.stime3 != null) {
										this.active = 4
									}
									if (data.etime3 != null) {
										this.active = 5
									}
								}
							}
						} else {
							uni.showModal({
								content: res.data.message,
								showCancel: false,
								cancelText: this.$t('sure'),
								confirmText: this.$t('cancel')
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
	.sign-title {
		display: flex;
		justify-content: space-between;
		padding: 30upx 24upx;
		/* border-bottom: 1upx solid #f1f1f1; */
	}

	.sign-title .portrait {
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		border-radius: 50%;
		background-color: #007AFF;
		color: #fff;
		font-size: 28upx;
		text-align: center;
	}

	.sign-title .sign-title-l {
		display: flex;
		align-items: center;
	}

	.sign-title .sign-title-l .text {
		margin-left: 20upx;
	}

	.sign-title .sign-title-l .text .name {
		font-size: 32upx;
	}

	.sign-title .sign-title-l .text .gz {
		color: darkblue;
		display: inline-flex;
	}

	.sign-title .sign-title-l .text .gz text {
		display: inline-block;
	}

	.sign-title .sign-title-l .text .gz .t1 {
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/*规定段落中的文本不进行换行 */
		width: 150upx;
		/*需要配合宽度来使用*/
	}
</style>
